<template>
  <div class="user-header" v-loading="imgloading">
    <input
      type="file"
      name="image"
      accept="image/png,image/jpeg,image/jpg"
      @change="onchangeImgFun"
      class="header-upload-btn user-header-com"
    />
    <div class="user-header-img user-header-com">
      <img alt="" :src="imgStr" :class="isimg ? 'small' : ''" />
    </div>

    <!-- <img src="assets/img/login.png" class="user-header-img user-header-com" alt=""> -->
    <!-- <p class="tip">图片限制50kb <span class="error">{{errorStr}}</span></p> -->
  </div>
</template>

<script>
import { patchimg, getuserinfo } from "network/request.js";
import { ElMessage } from 'element-plus'
export default {
  data() {
    return {
      imgStr: require("assets/img/login.png"),
      errorStr: "",
      isimg: true,
      userid: "",
      imgloading: true,
    };
  },
  methods: {
    onchangeImgFun(e) {
    //   console.log(123);
      var file = e.target.files[0];
      //   console.log(file);
      // 获取图片的大小，做大小限制有用
      let imgSize = file.size;
      //   console.log(imgSize);
      var _this = this; // this指向问题，所以在外面先定义
      // 比如上传头像限制5M大小，这里获取的大小单位是b
      if (imgSize <= 100 * 1024) {
        // 合格
        _this.errorStr = "";
        // console.log("大小合适");
        // 开始渲染选择的图片
        // 本地路径方法 1
        let imgStr1 = window.URL.createObjectURL(e.target.files[0])
        console.log(imgStr1) // 获取当前文件的信息
        // base64方法 2
        var reader = new FileReader();
        reader.readAsDataURL(file); // 读出 base64
        reader.onloadend = function () {
          // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
          var dataURL = reader.result;
          //   console.log(dataURL);
          _this.imgStr = dataURL;
          // 下面逻辑处理
          //   console.log(_this.imgStr);
          _this.isimg = false;
          let imgstr = {
            userimg: _this.imgStr,
          };
        //   console.log(_this.userid);
          patchimg(_this.userid, imgstr).then(() => {
              ElMessage.success("图片上传成功!");
          });
          //   localStorage.setItem("imgstr", JSON.stringify(_this.imgStr));
        };
      } else {
        console.log("大小不合适");
        _this.errorStr = "图片大小超出范围";
      }
    },
  },
  created() {
    let token = localStorage.getItem("token");
    getuserinfo(token).then(({ data: res }) => {
    //   console.log(res[0]);
      this.userid = res[0].id
      if (res[0].userimg != "") {
        this.imgStr = res[0].userimg;
        this.isimg = false;
      }
    });
    this.imgloading = false;
  },
};
</script>

<style scoped>
.user-header {
  position: relative;
  /* display: inline-block; */
  /* border-radius: 50%; */
  width: 100px;
  height: 100px;
  z-index: 100;
  background-color: rgb(0, 0, 0);
  background: url("http://192.168.2.27:8888/assets/carmra.png") center no-repeat;
  background-size: 40%;
}
.user-header-img {
  width: 100px;
  height: 100px;
  border: none;
  transition: 0.3s linear;
  background-color: #aaa;
  border-radius: 50%;
}
.user-header-img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.user-header-img > .small {
  width: 50%;
  height: 50%;
}
.user-header:hover .user-header-img {
  opacity: 0.1;
}
.header-upload-btn {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  border: none;
  z-index: 101;
  /* border-radius: 50%; */
  /* 通过定位把input放在img标签上面，通过不透明度隐藏 */
}
/* .tip {
  font-size: 14px;
  color: #666;
} */
/* error是用于错误提示 */
/* .error {
  font-size: 12px;
  color: tomato;
  margin-left: 10px;
} */
</style>